<template>
  <div>
    <div id="map-con" ref="mapCon"></div>
  </div>
</template>

<script>
import ol from "ol";
import Map from "ol/Map";
import { OSM, Vector as VectorSource } from "ol/source";
import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
import Feature from "ol/Feature";
import View from "ol/View";
import { fromLonLat } from "ol/proj";
import { Fill, Stroke, Style } from "ol/style";
import axios from "axios";
import GeoJSON from "ol/format/GeoJSON";

export default {
  name: "shadow",
  async mounted() {
    const map = new Map({
      layers: [
        new TileLayer({
          source: new OSM(),
        }),
      ],
      view: new View({
        zoom: 10,
        minZoom: 0,
        maxZoom: 20,
        center: fromLonLat([120.771441, 30.756433]),
        constrainRotation: true,
      }),
      target: this.$refs.mapCon,
    });

    // const pointData = (await this.getArea()).data;
    // console.log("pointData", pointData)
    // let features = [];
    // for(let i = 0; i <script pointData.length; i++) {
    //     if(pointData[i].geometry.coordinates.length > 0) {
    //         features = [...features, ...pointData[i].geometry.coordinates[0]]
    //     }
    // }
    // console.log(features, "features")
    const geoData = await this.getArea();
    const source = new VectorSource({
      features: new GeoJSON().readFeatures(geoData.data[0].geometry, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857",
      }),
    });

    const style = new Style({
      stroke: new Stroke({
        color: "red",
        width: 3,
      }),
      fill: new Fill({
        color: "rgba(0,0,0,0.6)",
      }),
    });
    let vectorLayer = new VectorLayer({
      source,
      style,
    });

    //添加阴影
    vectorLayer.on("precompose", (evt) => {
      console.log("precompose");
      evt.context.shadowBlur = 25;
      evt.context.shadowColor = "#000000";
    });
    vectorLayer.on("postcompose", (evt) => {
      console.log("postcompose");
      evt.context.shadowBlur = 0;
      evt.context.shadowColor = "#000000";
    });
    // this.onBindLayerClick(vectorLayer);
    map.addLayer(vectorLayer);
  },
  created() {},
  methods: {
    async getArea() {
      const data = await axios.get("./0.json");
      return data;
    },
    onBindLayerClick(layer) {
      console.log("ddddd");
      layer.on("prerender", (evt) => {
        console.log("precompose");
        evt.context.shadowBlur = 25;
        evt.context.shadowColor = "black";
      });
      layer.on("postrender", (evt) => {
        console.log("postcompose");
        evt.context.shadowBlur = 0;
        evt.context.shadowColor = "black";
      });
    },
  },
};
</script>

<style>
#map-con {
  height: 90vh;
}
</style>